import {
  Component,
  ViewChild,
  Injector,
  Output,
  EventEmitter,
  ElementRef,
  AfterViewInit,
  ViewContainerRef,
  ComponentRef,
  ComponentFactoryResolver,
  OnDestroy,
  ViewEncapsulation
} from '@angular/core';
import { ModalDirective } from 'ngx-bootstrap';
import { AppComponentBase } from '@shared/common/app-component-base';
import {
  PipelineServiceProxy,
  PipelineListDto
} from '@shared/service-proxies/service-proxies';
import { finalize } from 'rxjs/operators';
import { ComponentConfig } from '@app/pipeline/shared/pipeline-config';
import { appModuleAnimation } from '@shared/animations/routerTransition';
import { LazyLoadEvent } from 'primeng/primeng';

@Component({
  selector: 'act-base',
  templateUrl: './act-base.component.html',
  styleUrls: ['./act-base.component.less'],
  encapsulation: ViewEncapsulation.None,
  animations: [appModuleAnimation()]
})
export class ActBaseModalComponent extends AppComponentBase
  implements OnDestroy {
  @ViewChild('actionModal') modal: ModalDirective;

  @ViewChild('container', { read: ViewContainerRef })
  container: ViewContainerRef;

  compRef: ComponentRef<any>; //  加载的组件实例

  @Output() modalRun: EventEmitter<any> = new EventEmitter<any>();

  active = false;
  runing = false;
  event: LazyLoadEvent;
  //modal 大小
  modalSize = '';
  //是否全屏
  isFullScreen = false;
  pipelineid: number;
  pipe: PipelineListDto = new PipelineListDto();

  constructor(
    injector: Injector,
    private resolver: ComponentFactoryResolver,
    private _pipelineService: PipelineServiceProxy
  ) {
    super(injector);
  }

  show(pipe: PipelineListDto, event?: LazyLoadEvent): void {
    this.active = true;
    this.event = event;
    this.isFullScreen = false;

    this.pipe = pipe;
    //console.log(this.pipe);
    setTimeout(() => {
      this.loadComponent();
      this.modal.show();
    }, 0);
  }
  // showQuick(pipe: PipelineListDto): void {
  //   //this.pipelineid = pipelineid;
  //   this.pipe = pipe;
  //   this.active = true;
  //   this.isFullScreen = false;
  //   this.pipe.actCode = 'QUICKGXZX';
  //   //this.pipe = pipe;
  //   //console.log(this.pipe);
  //   setTimeout(() => {
  //     this.loadComponent();
  //     this.modal.show();
  //   }, 0);
  // }

  run(): void {
    this.runing = true;

    this._pipelineService
      .getPipelineAndRun(this.pipe.id)
      .pipe(
        finalize(() => {
          this.runing = false;
        })
      )
      .subscribe(() => {
        this.notify.info('运行成功');
        this.close();
        this.modalRun.emit(this.event);
      });
  }

  fullScreen() {
    this.isFullScreen = !this.isFullScreen;
    setTimeout(() => {
      if (this.isFullScreen) {
        mApp.initScroller($('.m-scrollable-full-screen'), { height: '100%' });
      } else {
        $('.full-screen-content .mCSB_scrollTools').hide();
        $('.full-screen-content .mCustomScrollBox').removeClass(
          'mCustomScrollBox'
        );
        $('.full-screen-content .mCSB_container').removeClass('mCSB_container');
      }
    }, 0);
  }

  close(): void {
    this.active = false;
    this.modal.hide();
  }

  loadComponent() {
    this.container.clear();

    let config = new ComponentConfig();

    this.modalSize = config.getComponentByName(this.pipe.actCode).modalSize;

    const component = config.getComponentByName(this.pipe.actCode).component;

    if (component) {
      let factory = this.resolver.resolveComponentFactory(component);

      if (this.compRef) {
        this.compRef.destroy();
      }
      this.compRef = this.container.createComponent(factory); //创建组件

      let modal = this.compRef.instance;

      modal.load(this.pipe);
    }
  }

  ngOnDestroy() {
    if (this.compRef) {
      this.compRef.destroy();
    }
  }
}
